<template>
  <el-dialog
    title="菜单编辑"
    width="700px"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    @close="$emit('update:visible', false)"
  >
    <el-form
      ref="form"
      label-width="120px"
      size="normal"
      :model="form"
      :rules="rules"
      :inline="false"
    >
      <el-form-item label="类型">
        <el-radio-group v-model="form.menu_type" :disabled="form.id > 0">
          <el-radio label="1">目录</el-radio>
          <el-radio label="2">菜单</el-radio>
          <el-radio label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch
          v-model="form.state"
          active-color="#13ce66"
          :active-value="'0'"
          :inactive-value="'1'"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="菜单名称">
        <el-input
          v-model="form.menu_name"
          placeholder=""
          size="normal"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-cascader
          :options="menuTree"
          v-model="form.parent_id"
          clearable
          filterable
          :show-all-levels="false"
          :props="{
            label: 'menu_name',
            value: 'id',
            expandTrigger: 'hover',
            checkStrictly: true,
          }"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="链接地址" v-if="form.menu_type == 2">
        <el-input
          v-model="form.link_url"
          placeholder=""
          size="normal"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单路由" v-if="form.menu_type == 2">
        <el-input
          v-model="form.Component"
          placeholder=""
          size="normal"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序号" v-if="form.menu_type != 3">
        <el-input-number
          v-model="form.menu_sort"
          size="normal"
          label=""
          :step="1"
          :controls="true"
          controls-position="both"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="授权标识" v-if="form.menu_type == 3">
        <el-input
          v-model="form.Component"
          placeholder=""
          size="normal"
        ></el-input>
      </el-form-item>
      <el-form-item label="图标" v-if="form.menu_type != 3">
        <el-input
          v-model="form.img_url"
          placeholder=""
          size="normal"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="$emit('update:visible', false)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { postMenuSave } from "@/api/System/Menu";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    menuTree: {
      type: Array,
      default: null,
    },
    current: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      form: {
        menu_name: "",
        parent_id: 0,
        link_url: "",
        img_url: "",
        menu_sort: "",
        Component: "",
        state: "",
        menu_type: 2,
      },
      rules: {},
    };
  },
  methods: {
    save() {
      if (this.form.parent_id && Array.isArray(this.form.parent_id)) {
        this.form.parent_id = this.form.parent_id[0];
      }
      postMenuSave(this.form).then((res) => {
        if (res.code == 0) {
          this.$message.success("保存成功");
          this.$emit("update:visible", false);
          this.$emit("refresh");
        }
      });
    },
  },
  computed: {
    dialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {
    current(newVal) {
      if (newVal) {
        this.form = JSON.parse(JSON.stringify(newVal));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>